<template>
  <div class="home">


      <div class="user">
        <h1 id="username">欢迎回来，{{ username }}</h1>
        <el-divider></el-divider>
        <el-card class="login-time-card">
          <p>最近一次登录时间：
            <el-divider direction="vertical"></el-divider>
            <span style="color: darkgray">{{time}}</span></p>
        </el-card>
      </div>

<!--    <el-divider></el-divider>-->

    <div class="balance-div">

      <el-card>
        <el-row>
          <el-col :span="16" class="money">
            <h1><span style="float: left;margin-left: 100px">当前账户余额</span>
              <el-divider direction="vertical"></el-divider>
              <span v-show="isShow">{{money}}</span><span v-show="!isShow">{{hiddenMoney}}</span></h1>
          </el-col>
          <el-col :span="8">
            <el-switch class="money-switch"
                       @change="hiddenMoneySwitch"
                v-model="value"
                active-color="#13ce66"
                inactive-color="#696969"
                       active-value="true" inactive-value="false"
            >
            </el-switch>
          </el-col>
        </el-row>

      </el-card>

    </div>
    <el-card style="width: 50%;margin:0 auto">
      <div class="exit">
        <el-button @click="LogoutBtn">退出登录</el-button>
      </div>
    </el-card>

  </div>
</template>

<script>

import {getLastLoginTime} from "@/api/user";
import {balance} from "@/api/account";
import {moneyFormat} from "@/utils/money";

export default {
  name: "index",
  data(){
    return {
      value:false,
      username: '张三',
      time: "",
      money: "1,145.14",
      hiddenMoney: "****.**",
      isShow:false
    }
  },

  created(){
    this.getLoginTime();
    this.getUserName();
    this.getAccountBalance();
  },
  methods:{
    getUserName(){
      this.username = JSON.parse(localStorage.getItem("USER_INFO")).userName;
    },
    //获取上次登录时间
    getLoginTime() {
      const userId = this.$store.state.user.userInfo.userId;
      getLastLoginTime(userId).then(res=>{
        const loginTime = res.content.lastLoginTime;
        if(loginTime === null){
          this.time = "你是第一次登录";
        }else {
          this.time = this.$moment(res.content.lastLoginTime).format("lll");
        }
      })
    },
    //退出登录
    async LogoutBtn(){
      this.$confirm("确定退出登陆吗？", "提示", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('Logout').then(() => {
          this.$router.push("/login")
          this.$message({
            message:"退出成功",
            type: 'success'
          })
        }).catch(()=>{
          this.$router.push("/login")
          this.$message({
            message:"退出成功",
            type: 'success'
          })
        })
      }).catch(() => {
      })
      // this.$router.push("/login")
    },
    //获取账户余额
    getAccountBalance(){
      const userId = this.$store.state.user.userInfo.userId

      balance(userId).then(res=>{
        this.money = moneyFormat(res.content)
      })
    },
    //显示和隐藏金额
    hiddenMoneySwitch(data){
      this.isShow = data == "true";
    }
  }
}
</script>

<style scoped>

.balance-div{
  margin: 20px auto;
  width: 50%;

}
.user{
  text-align: center;
}
#username{
  font-size: 30px;
  font-family: 黑体,serif;
  color: #3894ff;
}

.exit{
  text-align: center;
}
.money-switch{
  margin-top: 21px;
}
.money{
  text-align: center;
  color: #3894ff;
}
.login-time-card{
  width: 50%;
  margin: 0 auto;
}
</style>
